<template>
  <a-row type="flex" :justify="collapsed ? 'space-around' : 'space-between'" align="middle"
         class="sider-title">
    <a-col :span="16" v-if="!collapsed">
      <a-tooltip placement="right">
        <template #title>
          <span>{{title}}</span>
        </template>
        {{ moduleNameFiler(title) }}
      </a-tooltip>
    </a-col>
    <a-col :span="6">
      <span v-if="this.$config.layout.BasicLayout.sider.collapsible" class="sider-title">
        <a-tooltip placement="right" v-if="collapsed">
          <template #title>
            <span>{{title}}</span>
          </template>
          <menu-unfold-outlined
            v-if="collapsed"
            @click="changeCollapse"/>
        </a-tooltip>
        <menu-fold-outlined v-else  @click="changeCollapse" />
      </span>
    </a-col>
  </a-row>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
export default {
  name: 'SiderTitle',
  props:{
    title:{
      type: String,
      required: false,
      default: '',
    }
  },
  data () {
    return {
      collapsed: false
    }
  },
  methods: {
    changeCollapse () {
      this.collapsed = !this.collapsed
      this.$emit('modify', this.collapsed)
    }
  },
  setup (props, context) {
    const store = useStore()
    const route = useRoute();

    /**
     * 模块名称过滤器
     * @param val 过滤前的模块名
     * @returns {*}
     */
    function moduleNameFiler(val) {
      return val.length > 8 ? val.substring(0, 7) + '...' : val
    }
    return {
      moduleNameFiler,
    }
  }
};
</script>

<style lang="less" scoped>
</style>
